<template>
  <div>
    <el-container>
      <el-header class="nav">
        <h1>
          <i class="el-icon-s-fold" @click="isCollapse = !isCollapse"></i>
          <span>后台管理页面</span>
        </h1>

        <i class="el-icon-rank" style="font-size:40px" @click="screen"></i>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            router
            :collapse="isCollapse"
          >
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>图书管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/tushu">选项1</el-menu-item>
                <el-menu-item index="1-2">选项2</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item index="/jichu">
              <i class="el-icon-setting"></i>
              <span slot="title">基础表格</span>
            </el-menu-item>
            <el-menu-item index="/tab">
              <i class="el-icon-setting"></i>
              <span slot="title">tab表格</span>
            </el-menu-item>
          </el-menu></el-aside
        >
        <el-main>
          <div class="tags">
            <div>
              <el-tag
                v-for="(tag, index) in tags"
                :key="tag.name"
                closable
                @click="changepage(tag.path)"
                @close="close(index)"
              >
                {{ tag.name }}
              </el-tag>
            </div>

            <el-dropdown @command="sel">
              <span class="el-dropdown-link">
                标签选项<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="all">关闭所有</el-dropdown-item>
                <el-dropdown-item command="other">关闭其他</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>

          <router-view></router-view
        ></el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import screenfull from "screenfull";
//使用全屏的第三方插件
export default {
  data() {
    return {
      isCollapse: true,
      tags: [
        { path: "/jichu", name: "基础表格" },
        { path: "/tab", name: "tab选项卡" },
      ],
    };
  },
  methods: {
    screen() {
      screenfull.toggle();
      //toggle是反转的意思 在全屏和退出全屏之间切换
    },
    changepage(path) {
      this.$router.push({ path: path });
    },
    close(i) {
      this.tags.splice(i, 1);
    },
    sel(val) {
      console.log(val);
      if (val == "all") {
        this.tags = [];
      } else {
        this.tags = this.tags.filter((item) => {
          if (item.path == this.$route.path) {
            return item;
          }
        });
      }
    },
    //关闭所有和关闭其他
  },
};
</script>
<style lang="scss">
.nav {
  background: rgb(84, 92, 100);
  color: aliceblue;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tags {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
